<template>
  <el-menu
    default-active="2"
    :collapse="isMenuCollapse"
    @open="handleOpen"
    @close="handleClose"
    style="height: 100vh"
  >
    <el-sub-menu index="1" @click="$router.push('/')">
      <template #title>
        <i class="el-icon-location"></i>
        <span class="unselectable">Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span class="unselectable">Group One</span></template>
        <el-menu-item index="1-1"><span class="unselectable">item one</span></el-menu-item>
        <el-menu-item index="1-2"><span class="unselectable">item two</span></el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3"><span class="unselectable">item three</span></el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span class="unselectable">item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2" @click="$router.push('/table')">
      <i class="el-icon-menu"></i>
      <template #title><span class="unselectable">Navigator Two</span></template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <template #title><span class="unselectable">Navigator Three</span></template>
    </el-menu-item>
    <el-menu-item index="4" @click="$store.commit('changeMenuCollapse')">
      <i class="el-icon-setting"></i>
      <template #title><span class="unselectable">Navigator Four</span></template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"

export default defineComponent({
  setup() {
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }
    return {
      handleOpen,
      handleClose,
    }
  },
  mounted() {
    console.log(this.$store.state.menu.isMenuCollapse)
    const isMenuCollapse = this.$store.state.menu.isMenuCollapse
    console.log(isMenuCollapse)

    return {
      isMenuCollapse,
    }
  },
  computed: {
    isMenuCollapse(){
      return this.$store.state.menu.isMenuCollapse
    }
  }
})
</script>

<style>
.elaa:not(.el-menu--collapse) {
  width: 10px;
  min-height: 400px;
}

</style>
